<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <div id="app">
    <ul>
      <li v-for="(item , index) in list">
        {{item.title}}
      </li>
    </ul>

    <input type="text" id="inp">
  </div>

  <script src="./js/vue2.6.12.js"></script>
  <script src="./js/axios.js"></script>

  <script>
    // 请求接口:https://apifoxmock.com/m1/3318905-2799336-default/news
    // 将新闻数据渲染到页面上

    var app = new Vue({
      el:'#app',
      data:{
        // this.list = 需要vue创建完毕
        list:[]
      },
      async created(){
        // 发起请求
        // await 必须卸载 有async修饰的函数中
        // async 只能修饰函数
        var res = await axios({
          url:'https://apifoxmock.com/m1/3318905-2799336-default/news',
        })

        console.log(res);
        this.list = res.data.data
      },
      mounted(){
        // 数据都渲染完了 触发
        console.log('mounted执行了');
        // 自动获取焦点
        // DOM 一定已经渲染结束了
        document.querySelector("#inp").focus()
      }
    })

    

  </script>
</body>
</html>